$transition-time: 0;

#app.dark {
  background-color: #121316;
  transition: background $transition-time;
}
.dark {
  .divider {
    border-left-color: #333434;
    transition: border-color $transition-time;
  }
  .navbar i:before {
    color: #4592af;
    transition: color $transition-time;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #4592af;
    transition: color $transition-time;
  }
  .el-icon-setting {
    color: #4592af;
    transition: color $transition-time;
  }
  .card-horizontal .card-title,
  .card-vertical .card-title {
    color: #e8e8ff;
    transition: color $transition-time;
  }
  .card-description {
    color: rgba(216, 216, 255, 0.4);
    transition: color $transition-time;
  }
  .card {
    transition: border-color $transition-time, background $transition-time;
  }
  .card:hover {
    background: hsla(0, 0%, 100%, 0.05);
    border: 1px solid hsla(0, 0%, 87.8%, 0.14);
    box-shadow: none;
    .card-description {
      color: #d8d8ff;
    }
  }
  .el-drawer__body {
    background-color: #121316;
    transition: background $transition-time;
  }
  .setting-title-text {
    color: #4592af;
    transition: color $transition-time;
  }
  .setting-content {
    background-color: #222831;
    transition: background $transition-time;
  }
  .setting-item-title {
    color: #e8e8ff;
    transition: color $transition-time;
  }
  .el-switch__core {
    border-color:#393e46;
    background: #393e46;
    transition: background 0.3s, border-color $transition-time;
    &:after {
      background-color: #e8e8ff;
    }
  }
  .el-switch__label {
    color: #e8e8ff;
    transition: color $transition-time;
  }
  .el-drawer {
    box-shadow: 0 8px 10px -5px rgba(255, 255, 255, .2),
    0 16px 24px 2px rgba(255, 255, 255, 0.14), 0 6px 30px 5px rgba(255, 255, 255, .12);
    transition: box-shadow $transition-time;
  }
}
